<template>
  <div class="workSpace">
    <div class="leftNav">
      <div class="logo" ref="logo">
        <img src="../assets/workspace/avatar.png" alt="" />
      </div>
      <div class="navList" ref="navList">
        <div>
          <div
            class="nav"
            :class="{ active: index === activeIndex }"
            v-for="(nav, index) in navList1"
            :key="index"
            @click="clickNav(index, 1)"
            @mouseenter="enterNav(index)"
            @mouseleave="leaveNav(index)"
          >
            <i :class="nav.icon"></i>
            <span v-if="closeSwift === 1" class="navName">{{ nav.name }}</span>
          </div>
        </div>
        <div style="padding: 0 40px">
          <el-divider content-position="center"></el-divider>
        </div>

        <div>
          <div
            class="nav"
            :class="{ active: index === activeIndex1 }"
            v-for="(nav, index) in navList2"
            :key="index"
            @click="clickNav(index, 2)"
            @mouseenter="enterNav(index)"
            @mouseleave="leaveNav(index)"
          >
            <i :class="nav.icon"></i>
            <span v-if="closeSwift === 1" class="navName">{{ nav.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="rightContent">
      <div class="topNav">
        <div class="closeSwift" @click="closeNav">
          <div v-if="closeSwift === 1">
            <i class="el-icon-s-fold"></i>
            <span>隐藏菜单</span>
          </div>

          <div v-if="closeSwift === 0">
            <i class="el-icon-s-unfold"></i>
            <span>展开菜单</span>
          </div>
        </div>

        <div class="user">
          <span><img src="../assets/workspace/avatar.png" alt="" /></span>
          <span class="username">马文通</span>
        </div>
        <!-- <div class="loginOut" @click="loginOut">退出登录</div> -->
      </div>
      <div class="content">
        <transition name="content-transition">
          <router-view />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "workSpaceView",
  data() {
    return {
      //1展开 0 收缩
      showNavInfo: false,
      closeSwift: 1,
      activeIndex: -1,
      activeIndex1: -1,
      navList1: [
        { name: "首页", icon: "el-icon-s-home", path: "/workspace/workHome" },
        {
          name: "登录设置",
          icon: "el-icon-s-cooperation",
          path: "/workspace/passwordSet",
        },
        { name: "网站设置", icon: "el-icon-s-home", path: "/workspace/workHome" },
        { name: "简历设置", icon: "el-icon-s-home", path: "/workspace/workHome" },
      ],
      navList2: [
        { name: "面试题精选", icon: "el-icon-s-home" },
        { name: "网站预览", icon: "el-icon-s-home", path: "/workspace/workHome" },
      ],
    };
  },
  created() {
    this.activeIndex = 0;
  },
  methods: {
    closeNav() {
      if (this.closeSwift === 1) {
        this.$refs.navList.style.width = "64px";
        this.$refs.navList.style.padding = "0 10px";
        this.$refs.logo.style.padding = "0";
        this.closeSwift = 0;
      } else {
        this.$refs.navList.style.width = "254px";
        this.$refs.navList.style.padding = "0 30px";
        this.$refs.logo.style.padding = "0";
        this.closeSwift = 1;
      }
    },
    leaveNav() {},
    enterNav(index) {
      if (this.closeSwift === 0) {
        this.enterActiveIndex = index;
        console.log(this.navList[index].showInfo);
      }
    },
    clickNav(index, type) {
      if (type === 1) {
        if (this.activeIndex !== index) {
          this.activeIndex = index;
          this.activeIndex1 = -1;
          this.$router.push(this.navList1[index].path);
        }
      } else {
        this.activeIndex = -1;
        this.activeIndex1 = index;
      }
    },
    loginOut() {
      this.$store.dispatch("loginOut");
    },
  },
};
</script>

<style  scoped>
.workSpace {
  width: 100%;
  height: 100%;
  min-width: 1020px;
  display: flex;
  background-color: #f5f6fa;
  overflow: hidden;
}
.leftNav {
  min-height: 890px;
  height: 100%;
  box-sizing: border-box;
  background-color: white;
  transition: 0.5s;
  z-index: 10;
}
.logo {
  overflow: hidden;
  height: 70px;
  text-align: center;
  width: 100%;
  line-height: 70px;
  font-size: 28px;
  color: #979797;
  background-color: white;
  border-bottom: 2px solid #f5f6fa;
}
.logo img {
  width: 64px;
  margin-top: 3px;
}
.navList {
  width: 254px;
  transition: 0.5s;
  margin-top: 1px;
  padding: 0 30px;
  box-sizing: border-box;
  background-color: white;
}
.nav:first-child {
  margin-top: 34px;
}
.nav {
  overflow: hidden;
  height: 40px;
  width: 100%;
  line-height: 40px;
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 14px;
  color: #74798c;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 7px;
}
.navInfo {
  height: 40px;
  width: 80px;
  position: absolute;
  left: 80px;
  top: 0;
  z-index: 10;
  border: 1px solid;
}
.navName {
  margin-left: 20px;
}
.navList .nav:hover {
  background-color: #0054fe;
  color: white;
}
.rightContent {
  flex: 1;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.topNav {
  width: 100%;
  height: 70px;
  padding: 4px 30px;
  box-sizing: border-box;
  line-height: 62px;
  color: #74798c;
  font-size: 14px;
  background-color: white;
}
.user {
  overflow: hidden;
  float: right;
  height: 32px;
  margin-top: 15px;
  box-sizing: border-box;
}
.user > span {
  height: 100%;
  float: left;
}
.user img {
  width: 32px;
  height: 32px;
  float: left;
}
.username {
  float: left;
  margin-left: 10px;
  line-height: 32px;
}
.closeSwift {
  float: left;
  cursor: pointer;
}
.closeSwift span {
  margin-left: 8px;
}

.closeSwift:hover {
  color: #0054fe;
}

.active {
  background-color: #0054fe;
  color: white;
}

.content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 30px;
  box-sizing: border-box;
  background-color: #f5f6fa;
}

.content-transition-enter-active {
  transition: all 0.5s;
}
.content-transition-enter,
.content-transition-leave-to {
  transform: translateX(100px) skewX(-15deg);
  opacity: 0;
}
</style>>
